<template>
	<view class="page index">
		<view class="form">
			<view class="item-list">
				<view class="border"></view>
				<view class="item">
					<view class="title">
						项目完结状态
					</view>
					<view class="value">
						{{document.normal ? '正常完结' : '异常完结'}}
					</view>
				</view>
			</view>
			<block v-if="!document.normal">
				<view class="item-list">
					<view class="border"></view>
					<view class="item">
						<view class="title">
							异常完结原因
						</view>
						<view class="value">
							{{document.reasonText}}
						</view>
					</view>
					<view class="border"></view>
				</view>
				<view class="text">
					<view class="title">
						<view>
							异常完结原因说明
						</view>
					</view>
					<textarea v-model="document.reasonDescription" placeholder="原因" :disabled="true" placeholder-class="place"></textarea>
				</view>
			</block>
			<view class="item-list">
				<view class="item">
					<view class="title">
						档案保管人
					</view>
					<view class="value">
						{{document.managerUserName}}
					</view>
				</view>
			</view>
			<view class="item-list">
				<view class="border"></view>
				<view class="item">
					<view class="title">
						档案存放位置
					</view>
					<view class="value">
						{{document.savePosition || '未说明'}}
					</view>
				</view>
				<view class="border"></view>
			</view>
			<view class="text">
				<view class="title">
					<view>
						归档说明
					</view>
				</view>
				<textarea v-model="document.fileDescription" placeholder="归档说明" :disabled="true" placeholder-class="place"></textarea>
			</view>
			<view class="file-content" v-if="document.fileUrls !== undefined && document.fileUrls.length > 0">
				<view class="title">
					凭证附件
				</view>
				<view class="file">
					<view class="file-item" v-for="(file, index) in document.fileUrls" :key="index"  @click="openFile(file)">
						{{index + 1}}.{{file.split('.').pop()}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getProjectDocumentApi} from "@/api/approval_api.js";
	export default{
		data() {
			return{
				document: {}
			}
		},
		props:{
			businessKey: 0
		},
		mounted() {
			uni.showLoading({
				mask: true,
				title: ' 加载中...'
			})
			this.getProjectDocument();
		},
		methods:{
			// 获取详情
			async getProjectDocument(){
				let res = await getProjectDocumentApi(this.businessKey).catch(() => {
					uni.hideLoading();
					return Promise.reject();
				})
				this.document = res.data;
				if(!this.document.normal){
					let reasonText = '';
					switch(this.document.reason){
						case 0: {
							reasonText = '未签约';
							break;
						}
						case 1: {
							reasonText = '未实施';
							break;
						}
						case 2: {
							reasonText = '未交付';
							break;
						}
						case 3: {
							reasonText = '未回款';
							break;
						}
					}
					this.$set(this.document, 'reasonText', reasonText)
				}
				await uni.hideLoading();
			},
			// 预览文件
			openFile(file){
				console.log(this.$share.isImg(file))
				if(this.$share.isImg(file)){
					let urls = [];
					urls[0] = file
					uni.previewImage({
						urls: urls
					})
				}else{
					this.$share.openFile(file);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		padding: 24rpx 0;
		.form{
			.item-list{
				.border{
					width: 100%;
					height: 4rpx;
					background-color: #e5e5e5;
				}
				.item{
					@include flex-r-between-center;
					line-height: 114rpx;
					padding: 0 30rpx;
					.title{
						flex: 0 0 auto;
						padding-right: 40rpx;
						font-size: 28rpx;
						color: #101010;
					}
					.value{
						flex: 1 0 0;
						font-size: 28rpx;
						color: #909090;
						text-align: right;
					}
				}
			}
			.file-content{
				padding: 0 30rpx;
				.title{
					line-height: 114rpx;
					font-size: 28rpx;
					color: #101010;
				}
				.file{
					.file-item{
						font-size: 26rpx;
						color: #000;
						background-color: #F3F6F9;
						height: 52rpx;
						text-align: center;
						line-height: 52rpx;
						border-radius: 6rpx;
						margin-bottom: 18rpx;
					}
				}
			}
			.text{
				border-bottom: 4rpx #e5e5e5 solid;
				padding: 12rpx 30rpx;
				.title{
					font-size: 28rpx;
					color: #101010;
					padding: 0 0 16rpx;
					display: flex;
					align-items: center;
					.require{
					  height: 28rpx;
					  width: 6rpx;
					  background-color: #c24135;
					  margin-left: 10rpx;
				  }
				}
				textarea{
					font-size: 28rpx;
					color: #909090;
					height: 125rpx;
				}
				.place{
					font-size: 28rpx;
					color: #909090;
				}
			}
		}
	}
</style>